<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            width: 100%;
            margin: 0 auto;
            background-color: #1a1a1a;
            color: #fafafa;
            position: relative;
            font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
        }

        /*h-top样式*/
        .t-welcome {
            margin: 15px 100px 0 100px;
            line-height: 16px;
            position: relative;
            font-size: 16px;
            width: 130px;
            height: 52px;
            float: left;
        }

        /*搜索框*/
        #item-input {
            margin-left: 13px;
            height: 40px;
            line-height: 40px;
            width: 100%;
            color: white;
            background-color: #1a1a1a;
            border: none;
        }

        .search-box {
            border-radius: 20px;
            border: 1px solid white;
        }

        .el-icon-search:before {

            color: white;
        }

        .t-search {
            margin-top: 30px;
            height: 50px;
            width: 500px;
            float: left;
        }

        /*搜索结束*/

        select {
            border: none;
            color: #fff;
            cursor: pointer;
            background: none;
            outline: 0;
            font-size: 16px;
        }

        .t-sign {
            margin-top: 25px;
            margin-left: 40px;
            min-width: 90px;
            width: 90px;
            height: 52px;
            float: left;
        }

        .t-sign > a {
            text-decoration: none;
            color: #fafafa;
            font-size: 16px;
            display: block;
            line-height: 26px;
            text-align: right;
        }

        .t-sign > a:hover {
            color: red;
        }


        ::placeholder {
            color: #fff;
        }

        /*h-top样式*/

        /*取消导航栏下划线*/
        .el-menu--horizontal > .el-menu-item.is-active {
            border-bottom: none;
        }

        /*导航栏悬停*/
        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {

            /*color: red;*/
            background-color: #1a1a1a;

        }

        /*导航栏展示*/
        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled) {
            font: 18px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            color: white;
            line-height: 50px;
            height: 50px;
            background-color: #1a1a1a;

        }

        /*弹框组件设置*/
        .el-menu--horizontal > .el-submenu .el-submenu__title {
            color: white;
        }

        .el-menu--horizontal > .el-submenu .el-submenu__title:hover {

            background-color: #1a1a1a;
        }

        .el-submenu__title {
            font: 18px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            border-bottom: none;
            background-color: #1a1a1a;
        }

        /*下拉框样式*/
        .el-menu--horizontal > .el-submenu .el-submenu__title {
            height: 50px;
            line-height: 50px;
            color: white;

        }

        /*下拉框点击后样式*/
        .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
            border-bottom: none;
            color: white;
        }

        /*/下拉框字体设置*/
        .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
            font: 16px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            height: 40px;
            line-height: 40px;
            background-color: #FFF;
            float: none;
            padding: 0 10px;
            color: #1a1a1a;
        }

        /*下拉框点击后颜色*/
        .el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
            color: white;
        }

        /*弹出信息样式*/
        #popup {
            font: 16px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            color: #1a1a1a;
            height: 40px;
            line-height: 40px;
        }

        #popup:hover {
            background-color: white;

        }

        #popup > a {
            text-decoration: none;
            color: #1a1a1a;
        }

        #popup > a:hover {
            color: red;
        }

        .el-menu--horizontal > .el-menu-item a {
            text-decoration: none;
            color: white;

        }

        .el-menu--horizontal > .el-menu-item a:hover {
            color: red;
        }

        /*b-right开始*/
        /*右下拉字体设置*/
        .el-dropdown-menu__item:not(.is-disabled) > a:hover {
            background-color: white;
            color: red;
            text-decoration: none;
        }

        .el-dropdown-menu__item:not(.is-disabled):hover {
            background-color: white;
            color: red;
        }

        .el-dropdown-menu__item:not(.is-disabled) > a {
            text-decoration: none;
            font: 15px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            color: #1a1a1a;
        }

        svg:hover path {
            fill: red;
        }

        /*main开始*/
        /*Location 一行的样式*/
        .wp {
            width: 1200px;
            color: #fafafa !important;
            margin: auto;
            padding-top: 12px;
        }

        /*去掉a标签的下划线*/
        #Location a {
            text-decoration: none;
        }

        /*<!--键盘左边放图片的框-->*/
        #prob1 {
            width: 570px;
            height: 612.39px;
            float: left;
            margin: 20px 20px 20px 20px;
        }

        /*<!--键盘右边放信息的框-->*/
        #prob2 {
            width: 570px;
            height: 612.39px;
            float: left;
            margin: 20px 0px;
            color: #1a1a1a;

        }


        /*.el-carousel__indicator--horizontal {*/
        /*    display: none;*/
        /*}*/


        /*图片内容*/
        .index-title {
            font-size: 38px;
            color: #E42F1E;
            line-height: 12px;
            font-weight: bold;
            text-align: center;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            text-transform: uppercase;

        }

        td, td {
            height: 30px;
            border: 1px solid white;
            margin: 0;
            padding: 5px 3px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-spacing: 0;
            list-style: none;
            color: white;
            font-size: 16px;
        }





        /*人像后的reply*/
        #replay {
            margin-left: 8px;
            background-color: #E42F1E;
            font-size: 14px;
            width: 130px;
            height: 32px;
            line-height: 32px;
            border-radius: 20px;
            color: #fafafa;
            border: 1px solid #E42F1E;
        }

        /*卡片样式*/
        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        #item-input2 {
            margin-left: 13px;
            color: white;
            height: 45px;
            background-color: #1a1a1a;
            border-radius: 0;
        }


    </style>

</head>
<body>
<div id="app">
    <el-container>
        <el-header class="header" style="width: 100%;height: 150px;position: relative">

            <div class="h-top" style="width: 100%;height: 100px">
                <div style="width: 1200px;height: 100px;margin: auto;">

                    <div class="t-logo" style="width:230px; height: 100px; float: left">
                        <img src="imgs/st.png">
                    </div>

                    <div class="t-welcome">
                        <p>Welcome!</p>
                        <span>Currency:</span>
                        <select name="currency" onchange="exchangeRate(this)" style="float: right">
                            <option >USD</option>
                        </select>
                    </div>

                    <div class="t-search">

                        <div class="search-box">
                            <el-input placeholder="Search..." type="text" id="item-input"
                                      v-model="wd" style="width: 80%">
                            </el-input>

                            <el-button
                                    style="float: right; background-color: rgba(0,0,0,0);border:none;width: 20%"
                                    @click="search()"
                                    icon="el-icon-search">

                            </el-button>
                        </div>


                    </div>

                    <div class="t-sign" v-if="!isLogin">
                        <a href="/user/login.html">Sign in</a>
                        <a href="/user/reg.html">Join Free</a>
                    </div>

                    <div class="t-sign" v-else>
                        <a href='javascript:void (0)' @click="logout()">Exit!</a>
                    </div>

                </div>
            </div>
            <div class="h-bottom" style="width: 1200px;height: 50px;margin: 0 auto">
                <div class="b-left" style=" margin: 0 auto; width: 70%;float: left;">

                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                             style="background: #1a1a1a;border: none;">

                        <el-menu-item index="1"><a href="/" target="_blank">家</a></el-menu-item>

                        <el-submenu index="2">
                            <template slot="title">产品</template>
                            <el-submenu index="2-1">
                                <template slot="title">键盘</template>
                                <el-menu-item index="2-1-1" id="popup"><a href="/">音频可视化器</a></el-menu-item>
                                <el-menu-item index="2-1-2" id="popup"><a href="/">MDA简介</a></el-menu-item>
                                <el-menu-item index="2-1-3" id="popup"><a href="/">键盘DIY套件</a></el-menu-item>
                                <el-menu-item index="2-1-4" id="popup"><a href="/">侧印盖</a></el-menu-item>
                                <el-menu-item index="2-1-5" id="popup"><a href="/">键盘+键帽</a></el-menu-item>

                                <el-submenu index="2-1-6">
                                    <template slot="title">开关</template>
                                    <el-menu-item index="2-1-6-1" id="popup"><a href="/">奥特穆</a></el-menu-item>
                                    <el-menu-item index="2-1-6-2" id="popup"><a href="/">盖特龙</a></el-menu-item>
                                    <el-menu-item index="2-1-6-3" id="popup"><a href="/">华诺</a></el-menu-item>
                                    <el-menu-item index="2-1-6-4" id="popup"><a href="/">Gateron PRO</a></el-menu-item>
                                </el-submenu>

                            </el-submenu>
                            <el-submenu index="2-2">
                                <template slot="title">电源</template>
                                <el-menu-item index="2-2-1" id="popup"><a href="/">80+白金</a></el-menu-item>
                                <el-menu-item index="2-2-2" id="popup"><a href="/">80+金</a></el-menu-item>
                                <el-menu-item index="2-2-3" id="popup"><a href="/">80+银</a></el-menu-item>
                                <el-menu-item index="2-2-4" id="popup"><a href="/">80+青铜</a></el-menu-item>
                                <el-menu-item index="2-2-5" id="popup"><a href="/">80+标准</a></el-menu-item>
                                <el-menu-item index="2-2-6" id="popup"><a href="/">无80以上</a></el-menu-item>
                            </el-submenu>
                        </el-submenu>

                        <el-menu-item index="3"><a href="/" target="_blank">关于</a></el-menu-item>
                        <el-menu-item index="4"><a href="/" target="_blank">博客</a></el-menu-item>
                        <el-menu-item index="5"><a href="/" target="_blank">常见问题</a></el-menu-item>
                        <el-menu-item index="6"><a href="/" target="_blank">接触</a></el-menu-item>

                    </el-menu>


                </div>

                <div class="b-right" style="float: right;margin-top: 8px">
                    <div class="candan" style="float: right">
                        <el-dropdown>
                            <i>
                                <svg viewBox="0 0 1024 1024" width="30" height="30">
                                    <path d="M867.995 459.647h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                                          p-id="2613" fill="#ffffff"></path>
                                    <path d="M867.995 763.291h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                                          p-id="2614" fill="#ffffff"></path>
                                    <path d="M156.005 260.709h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353z"
                                          p-id="2615" fill="#ffffff"></path>
                                </svg>
                            </i>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a href="/">家</a></el-dropdown-item>
                                <el-dropdown-item><a href="/">产品</a></el-dropdown-item>
                                <el-dropdown-item><a href="/">关于</a></el-dropdown-item>
                                <el-dropdown-item><a href="/">博客</a></el-dropdown-item>
                                <el-dropdown-item><a href="/">常见问题</a></el-dropdown-item>
                                <el-dropdown-item><a href="/">接触</a></el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div id="gouwuche" class="gouwuche" style="float: right;margin-right: 30px">
                        <a href="/">
                            <svg viewBox="0 0 1109 1024" width="30" height="30">
                                <path d="M308.821 950.187A54.187 54.187 0 1 1 362.965 896c0 29.867-24.32 54.187-54.186 54.187m0-182.187c-70.571 0-128 57.43-128 128s57.429 128 128 128c70.613 0 128-57.43 128-128s-57.387-128-128-128m457.984 131.883a53.59 53.59 0 0 1 14.378-40.704 54.187 54.187 0 0 1 93.867 36.778 54.23 54.23 0 0 1-58.112 54.059 54.315 54.315 0 0 1-50.133-50.133m144.469-94.294A127.573 127.573 0 0 0 820.779 768c-70.571 0-128 57.43-128 128s57.429 128 128 128c35.498 0 68.522-14.25 92.97-40.107a127.573 127.573 0 0 0-2.56-178.346m76.971-593.75c9.387 0 17.792 4.395 23.21 12.032a27.733 27.733 0 0 1 3.585 25.728L890.027 591.19a64.384 64.384 0 0 1-60.544 42.582h-462.08a64.299 64.299 0 0 1-62.976-51.627l-75.094-370.347H988.16z m88.875-38.016a93.227 93.227 0 0 0-76.118-39.253l-784.981 4.224-26.24-111.872a10.496 10.496 0 0 0-1.11-2.816l-0.085-0.17a33.963 33.963 0 0 0-5.973-10.667 28.63 28.63 0 0 0-4.395-4.267 30.336 30.336 0 0 0-17.066-6.955h-0.086a10.155 10.155 0 0 0-2.986-0.512H45.312c-13.184 0-25.088 4.907-33.621 13.867A40.448 40.448 0 0 0 0 42.325c0 17.195 13.867 36.48 32.427 36.48h86.784l26.24 107.52 82.602 416.896a129.152 129.152 0 0 0 126.55 103.638h487.722c54.443 0 103.254-34.347 121.6-85.504l124.928-362.923a92.757 92.757 0 0 0-11.818-84.65z"
                                      fill="#ffffff"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </el-header>
        <!--Location 开始-->
        <div id="Location" style="width: 100%;height: 51px ;">
            <p class="wp">
                Location:<a href="/" style="color: #fafafa;">Home</a> >
                <a href="/keyboard.html" style="color: #fafafa">KEYBOARD</a> >
                <a href="Javascript:void (0)" style="color: red;">MK980 98KEYS MECHANICAL KEYBOARD</a>

            </p>
        </div>
        <!--Location 结束-->
        <el-main>
            <div style="width: 1200px;height: 677.39px;background-color: #fafafa;margin:0 auto;">

                <!--键盘左边放图的框-->
                <div id="prob1">
                    <template>
                        <div class="block">
                            <span class="demonstration">默认 Hover 指示器触发</span>
                            <el-carousel height="480px">
                                <el-carousel-item v-for="item in productArr" :key="item">
                                    <img :src=item.url alt="" style="width: 100%;height: 100%">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </template>
                    <div style="width: 550px">
                        <el-row :gutter="20">
                            <el-col :span="6"><img src="imgs/jp1.webp" style="width: 100%;height: 100%;margin: 10px"
                                                   alt=""></el-col>
                            <el-col :span="6"><img src="imgs/jp1.webp" style="width: 100%;height: 100%;margin: 10px"
                                                   alt=""></el-col>
                            <el-col :span="6"><img src="imgs/jp1.webp" style="width: 100%;height: 100%;margin: 10px"
                                                   alt=""></el-col>
                            <el-col :span="6"><img src="imgs/jp1.webp" style="width: 100%;height: 100%;margin: 10px"
                                                   alt=""></el-col>
                        </el-row>
                    </div>


                </div>
                <!--键盘右边放信息的框-->
                <div id="prob2">
                    <form action="" id="form1">
                        <!--详细信息文字  开始-->
                        <h1 style="line-height: 26px;color: #222;font-size: 18px;overflow: hidden;">
                            MK980 98KEYS MECHANICAL KEYBOARD
                        </h1>
                        <p style="color: #AAA;line-height: 1.4px;font-size: 16px">MK980</p>
                        <p style="color: #999999;line-height: 24px;margin-bottom: 8px; font-size: 16px;">
                            Product Brands: 1STPLAYER
                        </p>
                        <p style="line-height: 24px;color: #999999;font-size: 16px;overflow: hidden;">
                            1st player Lang MK980 upgraded 98 keys RGB mechanical keyboard with red and green switch
                            customize for music controls.
                        </p>
                        <!--详细信息文字  结束-->
                        <!--五颗星星开始-->
                        <div id="layui-rate" style="width: 285px;height: 26px; float: left;overflow:hidden">
                            <svg viewBox="0 0 6943 1024" width="100" height="10">
                                <path d="M973.313047 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835C537.837311 2.844387 533.456955 0.227551 515.195986 0.227551c-18.20408 0-26.680355 7.167857-61.324996 74.579841C398.405433 171.857896 317.112837 323.748192 317.112837 323.748192S156.91693 360.725229 53.494998 379.782626C2.921788 388.03135-13.746324 432.176245 11.910052 463.464509c72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C772.613061 1021.590235 783.421733 1023.97952 793.433977 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C1039.814828 439.344102 1023.374268 381.944361 973.313047 373.638749zM2452.394576 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C2251.69459 1021.590235 2262.503263 1023.97952 2272.515507 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C2518.896357 439.344102 2502.455797 381.944361 2452.394576 373.638749zM3931.476105 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C3730.776119 1021.590235 3741.584792 1023.97952 3751.597036 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C3997.977886 439.344102 3981.537326 381.944361 3931.476105 373.638749zM5410.557635 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.758154 248.883911-136.758154 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.81148 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C5209.857649 1021.590235 5220.666322 1023.97952 5230.678565 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C5477.059416 439.344102 5460.618856 381.944361 5410.557635 373.638749zM6889.639164 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 37.94413 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.584421 122.422441 11.036223 5.347449 21.844896 7.736734 31.857141 7.736734 30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C6956.140945 439.344102 6939.700385 381.944361 6889.639164 373.638749z"
                                      fill="#f4aa2a"></path>
                            </svg>
                            <span style="color: #999999; font-size: 12px;">(24 Reviews)</span>
                        </div>
                        <!--五颗星星结束-->
                        <!--个网站图标开始-->
                        <div style="width: 285px;height: 26px;background-color: #fafafa;float: right;overflow:hidden;"></div>
                        <!--个网站图标结束-->
                        <!--价格颜色数量等...开始-->
                        <div style="width: 570px; height: 311px; background-color: #85ce61;overflow:hidden;margin-left: 10px">
                            <p>
                                <select name="currency" onchange="exchangeRate(this)">
                                    <option value="1279" selected="">USD</option>
                                </select>
                            </p>

                        </div>
                        <!--价格颜色数量等...结束-->

                    </form>
                </div>
            </div>
            <div style="margin: 0 auto;width: 1200px;padding: 0">
                <!--图片下边的红色标题 开始-->
                <div style="height: 92px">
                    <div class="index-title">
                        <p>
                            <!--                        ::before-->
                            <span>
<!--                            ::before-->
                            Description
                        </span>
                            <!--                        ::after-->
                        </p>
                    </div>
                </div>
                <!--图片下边的红色标题 结束-->
                <!--商品细节展示图 开始-->
                <div>

                        <img src="imgs/mk980.webp" alt="" style="width: 100%">
                        <img src="imgs/towjp.webp" alt="" style="width: 100%">
                        <img src="imgs/other1.webp" alt="" style="width: 100%">
                        <img src="imgs/jpwhite.webp" alt="" style="width: 100%">
                        <img src="imgs/jpblack.webp" alt="" style="width: 100%">
                        <img src="imgs/jpnull.webp" alt="" style="width: 100%">
                        <img src="imgs/funcition.webp" alt="" style="width: 100%">
                        <img src="imgs/by.webp" alt="" style="width: 100%">
                        <img src="imgs/lang.webp" alt="" style="width: 100%">
                        <img src="imgs/lighting.webp" alt="" style="width: 100%">
                        <img src="imgs/FN.webp" alt="" style="width: 100%">
                        <img src="imgs/FN+F12.webp" alt="" style="width: 100%">
                        <img src="imgs/1ST.webp" alt="" style="width: 100%">
                        <img src="imgs/type.webp" alt="" style="width: 100%">

                </div>
                <!--商品细节展示图 结束-->
                <!--表格开始-->
                <div style="width: 1200px;margin: auto">
                    <table style="width: 100%;border-collapse: collapse">
                        <tr>
                            <td>Model</td>
                            <td>LANG MK980</td>
                        </tr>
                        <tr>
                            <td>Weight</td>
                            <td>1.1kg / 2.425lb</td>
                        </tr>
                        <tr>
                            <td>Dimensions</td>
                            <td>385*147*38MM</td>
                        </tr>
                        <tr>
                            <td>Connectivity</td>
                            <td>150cm USB Cable</td>
                        </tr>
                        <tr>
                            <td>LED Effects</td>
                            <td>RGB</td>
                        </tr>
                        <tr>
                            <td>Life Expectancy</td>
                            <td>up to 50 million keystrokes</td>
                        </tr>
                        <tr>
                            <td>Keycaps</td>
                            <td>MDA PBT Keycaps</td>
                        </tr>
                        <tr>
                            <td>Switch Type</td>
                            <td>Gateron</td>
                        </tr>
                        <tr>
                            <td>Current</td>
                            <td>500mA</td>
                        </tr>
                        <tr>
                            <td>Voltage</td>
                            <td>5V</td>
                        </tr>
                        <tr>
                            <td>Warranty</td>
                            <td>1 year</td>
                        </tr>
                        <tr>
                            <td>System Requirement</td>
                            <td>Windows/Linux</td>
                        </tr>
                    </table>
                </div>
                <!--表格结束-->
                <!--图片下边的红色标题 开始-->
                <div style="height: 92px">
                    <div class="index-title">
                        <p>
                            <!--                        ::before-->
                            <span>
<!--                            ::before-->
                            Description
                        </span>
                            <!--                        ::after-->
                        </p>
                    </div>
                </div>
                <!--图片下边的红色标题 结束-->

                <!--评论 区-->
                <div>
                    <div style="width: 100%;height: 63px;margin: 0 auto">
                        <!--第二次的星星开始-->
                        <div style="width: 460px;margin-top: 30px;overflow: hidden;">
                            <svg viewBox="0 0 6943 1024" width="100" height="30">
                                <path d="M973.313047 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835C537.837311 2.844387 533.456955 0.227551 515.195986 0.227551c-18.20408 0-26.680355 7.167857-61.324996 74.579841C398.405433 171.857896 317.112837 323.748192 317.112837 323.748192S156.91693 360.725229 53.494998 379.782626C2.921788 388.03135-13.746324 432.176245 11.910052 463.464509c72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C772.613061 1021.590235 783.421733 1023.97952 793.433977 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C1039.814828 439.344102 1023.374268 381.944361 973.313047 373.638749zM2452.394576 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C2251.69459 1021.590235 2262.503263 1023.97952 2272.515507 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C2518.896357 439.344102 2502.455797 381.944361 2452.394576 373.638749zM3931.476105 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C3730.776119 1021.590235 3741.584792 1023.97952 3751.597036 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C3997.977886 439.344102 3981.537326 381.944361 3931.476105 373.638749zM5410.557635 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.758154 248.883911-136.758154 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.81148 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C5209.857649 1021.590235 5220.666322 1023.97952 5230.678565 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C5477.059416 439.344102 5460.618856 381.944361 5410.557635 373.638749zM6889.639164 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 37.94413 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.584421 122.422441 11.036223 5.347449 21.844896 7.736734 31.857141 7.736734 30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C6956.140945 439.344102 6939.700385 381.944361 6889.639164 373.638749z"
                                      fill="#f4aa2a"></path>
                            </svg>
                            <span style="color: #999999; font-size: 12px;">(24 Reviews)</span>
                        </div>
                        <!--第二次的星星结束-->
                        <el-divider></el-divider>
                    </div>
                    <!--用户列表开始-->
                    <div style="height:150px;margin-top: 18px ">
                        <!--头像图标 下边用户名开始开始-->
                        <div style="height: 137px;float: left">
                            <img src="imgs/head.png" alt="" style="width: 100px;height: 100px">
                            <div style="color: #fafafa;margin-left: 9px; overflow: hidden;font-size: 18px;font-weight: bold;line-height: 20px">
                                Customer
                            </div>
                        </div>
                        <!--头像图标 下边用户名结束-->
                        <div style="width: 1060px; height: 143px;float: left;margin-left: 40px">
                            <!--人头像边上的星星开始-->
                            <div style="width: 125px;height: 22px;overflow: hidden;">
                                <svg viewBox="0 0 6943 1024" width="100" height="30">
                                    <path d="M973.313047 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835C537.837311 2.844387 533.456955 0.227551 515.195986 0.227551c-18.20408 0-26.680355 7.167857-61.324996 74.579841C398.405433 171.857896 317.112837 323.748192 317.112837 323.748192S156.91693 360.725229 53.494998 379.782626C2.921788 388.03135-13.746324 432.176245 11.910052 463.464509c72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C772.613061 1021.590235 783.421733 1023.97952 793.433977 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C1039.814828 439.344102 1023.374268 381.944361 973.313047 373.638749zM2452.394576 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C2251.69459 1021.590235 2262.503263 1023.97952 2272.515507 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C2518.896357 439.344102 2502.455797 381.944361 2452.394576 373.638749zM3931.476105 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C3730.776119 1021.590235 3741.584792 1023.97952 3751.597036 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C3997.977886 439.344102 3981.537326 381.944361 3931.476105 373.638749zM5410.557635 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.758154 248.883911-136.758154 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.81148 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C5209.857649 1021.590235 5220.666322 1023.97952 5230.678565 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C5477.059416 439.344102 5460.618856 381.944361 5410.557635 373.638749zM6889.639164 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 37.94413 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.584421 122.422441 11.036223 5.347449 21.844896 7.736734 31.857141 7.736734 30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C6956.140945 439.344102 6939.700385 381.944361 6889.639164 373.638749z"
                                          fill="#f4aa2a"></path>
                                </svg>
                            </div>
                            <!--人头像边上的星星结束-->
                            <!--星星边上的字开始-->
                            <p style="word-wrap: break-word;text-align: justify;font-size: 16px;line-height: 24px">
                                I've been using this keyboard for two days so far and after getting accustomed to the
                                design it's AMAZING. The MDA keycaps work great for rapid typing and the whole keyboard
                                just feels solid and well constructed.
                            </p>
                            <!--星星边上的字结束-->
                            <!--下边的小资和点赞图标,和按钮开始-->
                            <div style="width: 1060px;height: 40px;">
                                <p style="float: left;color: #AAAAAA; font-size: 12px;line-height: 20px; margin-bottom: 6px">
                                    Friday, Aug. 13, 2021 09:31:13</p>
                                <p style="float: right;color: #AAAAAA; font-size: 12px">
                                    <span>Was this review helpful?</span>
                                    <img style="margin-left: 8px" data-num="1" src="imgs/zan.png" data-id="8279"
                                         onclick="good(this);">
                                    <span>(1)</span>
                                    <button id="replay">Reply（0）</button>
                                </p>
                            </div>
                        </div>
                        <!--下边的小资和点赞图标,和按钮结束-->
                    </div>
                    <!--用户列表结束-->
                    <el-divider></el-divider>
                    <!--用户列表开始-->
                    <div style="height: 150px">
                        <!--头像图标 下边用户名开始开始-->
                        <div style="height: 137px;float: left">
                            <img src="imgs/head.png" alt="" style="width: 100px;height: 100px">
                            <div style="color: #fafafa;margin-left: 9px; overflow: hidden;font-size: 18px;font-weight: bold;line-height: 20px">
                                Customer
                            </div>
                        </div>
                        <!--头像图标 下边用户名结束-->
                        <div style="width: 1060px; height: 143px;float: left;margin-left: 40px">
                            <!--人头像边上的星星开始-->
                            <div style="width: 125px;height: 22px;overflow: hidden;">
                                <svg viewBox="0 0 6943 1024" width="100" height="30">
                                    <path d="M973.313047 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835C537.837311 2.844387 533.456955 0.227551 515.195986 0.227551c-18.20408 0-26.680355 7.167857-61.324996 74.579841C398.405433 171.857896 317.112837 323.748192 317.112837 323.748192S156.91693 360.725229 53.494998 379.782626C2.921788 388.03135-13.746324 432.176245 11.910052 463.464509c72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C772.613061 1021.590235 783.421733 1023.97952 793.433977 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C1039.814828 439.344102 1023.374268 381.944361 973.313047 373.638749zM2452.394576 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C2251.69459 1021.590235 2262.503263 1023.97952 2272.515507 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C2518.896357 439.344102 2502.455797 381.944361 2452.394576 373.638749zM3931.476105 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C3730.776119 1021.590235 3741.584792 1023.97952 3751.597036 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C3997.977886 439.344102 3981.537326 381.944361 3931.476105 373.638749zM5410.557635 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.758154 248.883911-136.758154 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.81148 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C5209.857649 1021.590235 5220.666322 1023.97952 5230.678565 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C5477.059416 439.344102 5460.618856 381.944361 5410.557635 373.638749zM6889.639164 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 37.94413 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.584421 122.422441 11.036223 5.347449 21.844896 7.736734 31.857141 7.736734 30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C6956.140945 439.344102 6939.700385 381.944361 6889.639164 373.638749z"
                                          fill="#f4aa2a"></path>
                                </svg>
                            </div>
                            <!--人头像边上的星星结束-->
                            <!--星星边上的字开始-->
                            <p style="word-wrap: break-word;text-align: justify;font-size: 16px;line-height: 24px">
                                I've been using this keyboard for two days so far and after getting accustomed to the
                                design it's AMAZING. The MDA keycaps work great for rapid typing and the whole keyboard
                                just feels solid and well constructed.
                            </p>
                            <!--星星边上的字结束-->
                            <!--下边的小资和点赞图标,和按钮开始-->
                            <div style="width: 1060px;height: 40px;">
                                <p style="float: left;color: #AAAAAA; font-size: 12px;line-height: 20px; margin-bottom: 6px">
                                    Friday, Aug. 13, 2021 09:31:13</p>
                                <p style="float: right;color: #AAAAAA; font-size: 12px">
                                    <span>Was this review helpful?</span>
                                    <img style="margin-left: 8px" data-num="1" src="imgs/zan.png" data-id="8279"
                                         onclick="good(this);">
                                    <span>(1)</span>
                                    <button id="replay">Reply（0）</button>
                                </p>
                            </div>
                        </div>
                        <!--下边的小资和点赞图标,和按钮结束-->
                    </div>
                    <!--用户列表结束-->
                    <el-divider></el-divider>
                    <!--用户列表开始-->
                    <div style="height: 150px">
                        <!--头像图标 下边用户名开始开始-->
                        <div style="height: 137px;float: left">
                            <img src="imgs/head.png" alt="" style="width: 100px;height: 100px">
                            <div style="color: #fafafa;margin-left: 9px; overflow: hidden;font-size: 18px;font-weight: bold;line-height: 20px">
                                Customer
                            </div>
                        </div>
                        <!--头像图标 下边用户名结束-->
                        <div style="width: 1060px; height: 143px;float: left;margin-left: 40px">
                            <!--人头像边上的星星开始-->
                            <div style="width: 125px;height: 22px;overflow: hidden;">
                                <svg viewBox="0 0 6943 1024" width="100" height="30">
                                    <path d="M973.313047 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835C537.837311 2.844387 533.456955 0.227551 515.195986 0.227551c-18.20408 0-26.680355 7.167857-61.324996 74.579841C398.405433 171.857896 317.112837 323.748192 317.112837 323.748192S156.91693 360.725229 53.494998 379.782626C2.921788 388.03135-13.746324 432.176245 11.910052 463.464509c72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C772.613061 1021.590235 783.421733 1023.97952 793.433977 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C1039.814828 439.344102 1023.374268 381.944361 973.313047 373.638749zM2452.394576 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C2251.69459 1021.590235 2262.503263 1023.97952 2272.515507 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C2518.896357 439.344102 2502.455797 381.944361 2452.394576 373.638749zM3931.476105 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.222185-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.297192 14.620152 159.911469 80.211729 245.641309 122.422441C3730.776119 1021.590235 3741.584792 1023.97952 3751.597036 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C3997.977886 439.344102 3981.537326 381.944361 3931.476105 373.638749zM5410.557635 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.260968 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.758154 248.883911-136.758154 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.81148 40.902293 38.001018 70.711475 68.777291 70.711475 10.012244 0 20.764029-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.641309 122.422441C5209.857649 1021.590235 5220.666322 1023.97952 5230.678565 1023.97952c30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C5477.059416 439.344102 5460.618856 381.944361 5410.557635 373.638749zM6889.639164 373.638749c-102.170401-19.057397-260.489012-49.663007-260.489012-49.663007s-80.325504-152.174735-135.279072-249.16835c-39.764538-71.963005-44.144895-74.579841-62.348975-74.579841-18.20408 0-26.680355 7.167857-61.324996 74.579841-55.465558 96.993616-136.815042 248.883911-136.815042 248.883911s-160.139019 36.977038-263.560951 56.034435c-50.573211 8.248724-67.241322 52.393619-41.584946 83.681882 72.645658 85.559178 193.759681 226.868352 193.759681 226.868352s-27.192345 155.360449-39.024998 261.626767c-3.868367 40.902293 37.94413 70.711475 68.777291 70.711475 10.012244 0 20.820917-2.389285 32.084691-7.736734 86.753821-42.210712 218.676515-106.49387 248.428809-121.114022 29.240304 14.620152 159.911469 80.211729 245.584421 122.422441 11.036223 5.347449 21.844896 7.736734 31.857141 7.736734 30.264284 0 69.289281-29.752294 65.705353-70.654587-11.832652-106.266319-30.036732-261.911206-30.036732-261.911206s113.434175-135.165297 185.283405-221.008913C6956.140945 439.344102 6939.700385 381.944361 6889.639164 373.638749z"
                                          fill="#f4aa2a"></path>
                                </svg>
                            </div>
                            <!--人头像边上的星星结束-->
                            <!--星星边上的字开始-->
                            <p style="word-wrap: break-word;text-align: justify;font-size: 16px;line-height: 24px">
                                I've been using this keyboard for two days so far and after getting accustomed to the
                                design it's AMAZING. The MDA keycaps work great for rapid typing and the whole keyboard
                                just feels solid and well constructed.
                            </p>
                            <!--星星边上的字结束-->
                            <!--下边的小资和点赞图标,和按钮开始-->
                            <div style="width: 1060px;height: 40px;">
                                <p style="float: left;color: #AAAAAA; font-size: 12px;line-height: 20px; margin-bottom: 6px">
                                    Friday, Aug. 13, 2021 09:31:13</p>
                                <p style="float: right;color: #AAAAAA; font-size: 12px">
                                    <span>Was this review helpful?</span>
                                    <img style="margin-left: 8px" data-num="1" src="imgs/zan.png" data-id="8279"
                                         onclick="good(this);">
                                    <span>(1)</span>
                                    <button id="replay">Reply（0）</button>
                                </p>
                            </div>
                        </div>
                        <!--下边的小资和点赞图标,和按钮结束-->
                    </div>
                    <!--用户列表结束-->
                    <el-divider></el-divider>
                    <!--图片下边的红色标题 开始-->
                    <div style="height: 92px;margin-top: 100px">
                        <div class="index-title">
                            <p>
                                <!--                        ::before-->
                                <span>
<!--                            ::before-->
                            YOU MAY LIKE
                        </span>
                                <!--                        ::after-->
                            </p>
                        </div>
                    </div>
                    <!--图片下边的红色标题 结束-->

                    <div>
                        <el-row :gutter="5">
                            <el-col :span="6" v-for="(o, index) in 4" :key="o">
                                <el-card :body-style="{ padding: '0px' }">
                                    <img src="imgs/jp2.webp"
                                         class="image">
                                    <div style="padding: 14px;">
                                        <span>MK980 98KEYS </span>
                                        <div class="bottom clearfix">
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>

                </div>
            </div>
        </el-main>

        <el-divider></el-divider>

        <el-footer>
            <div style="width: 1200px;height: 300px;margin:0 auto">
                <div>
                    <p style=" font-weight: bold;
                                font-size: 28px;
                                 margin-bottom: 23px;
                                text-align: center">
                        SUBSCRIBE TO OUR NEWSLETTER
                    </p>
                </div>

                <div id="bottom_search">
                    <div style="width: 800px;margin: 0 auto;">

                        <el-input placeholder="Enter your email address..." type="text" id="item-input2"
                                  v-model="bottomInput" style="width:75%">
                        </el-input>

                        <el-button
                                style="float: right; background-color: red;
                                border:none;width: 25%;border-radius: 0;
                                color: white;height: 45px;font-size: 18px;
                                cursor: pointer;"
                                @click="search2()"
                                id="bottom_button">

                            Subscribe

                        </el-button>
                    </div>

                    <div style="margin-top: 100px">
                        <p style="text-align: center;
                           color: #AAA;
                           font-size: 14px;
                           line-height: 26px">
                            © First Player Technology (Guangzhou) Co., Ltd. All Rights Reserved. Sitemap
                        </p>
                    </div>

                </div>

            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                wd: "",
                bottomInput: "",
                urlArr: [
                    {url: "imgs/1.jpg"}, {url: "imgs/2.jpg"}, {url: "imgs/3.jpg"}, {url: "imgs/4.jpg"},
                ],
                productArr: [
                    {url: "imgs/jp1.webp"},
                    {url: "imgs/jp2.webp"},
                    {url: "imgs/jp3.webp"},
                    {url: "imgs/jp4.webp"},
                    {url: "imgs/towjp.webp"},
                ],
                currentDate: new Date(),
                isLogin: false,
            };
        },
        created:function (){
            axios.get("/user/getCurrentUser").then(function (response){
                if (response.data !== null){
                    v.isLogin = true;
                }else{
                    v.isLogin = false;
                }
            })
        },




        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            search() {

            },
            search2() {

            },
            logout(){
                axios.get("/user/logout").then(function (response){
                    if (response.data.state !== 200){
                        alert(response.data.message);
                        return;
                    }
                    v.isLogin = false;
                    alert("成功");
                })
            }

        }
    })
</script>

</html>